<script setup>
    import axios from 'axios';
    import { ref } from 'vue';
    import DatePickerTreeSelector from "./DatePickerTreeSelector.vue";
    import ProcessBar from "./ProcessBar.vue";

   
    const isStartReciteWord = ref(false);
    const isRightAnswer = ref(false);
    const numReciteWord = ref(0);
    const currentReciteWord = ref(0);
    const myAnswer = ref("");
    const wordList = ref([]);
    const wrongAnswerRecord = ref([]);
    const examTableName = ref("");
    const examId = ref(0);
    const isSelectExamHis = ref(false);
    const isSelectExamNew = ref(false);
    const isStartReciteWordPart = ref(false);
    const examTime = ref([]);
    const selectExamTime = ref(0);
    const dateInfos = ref();

    function resetAllState(){
        isStartReciteWord.value = false;
        isRightAnswer.value = false;
        numReciteWord.value = 0;
        currentReciteWord.value = 0;
        myAnswer.value = "";
        wordList.value.length = 0 ;
        wrongAnswerRecord.value.length = 0;
        isSelectExamHis.value = false;
    }

    function startReciteWord(){
        resetAllState();
        isSelectExamNew.value = true;
        isSelectExamHis.value = false;
    }

    function startReciteWordAll(){
        axios.post('http://127.0.0.1:5001/startReciteWord',{
            isRand : 1
        },{
            headers:{
               'Content-Type':'application/x-www-form-urlencoded'
            }
        })
        .then(function (response) {
            if(response.data.success == 'true'){
                isStartReciteWord.value = true;
                isSelectExamNew.value = false;
                wordList.value = response.data.wordList;
                numReciteWord.value = response.data.wordCount;
                examTableName.value = response.data.examTableName;
                examId.value = response.data.examId;
            }
            // console.log(resSearch);
        })
        .catch(function (error) {
            console.log(error);
        });
        
    }

    function startReciteWordPart(selectedDays){
        if(isStartReciteWordPart.value === false){
            axios.post('http://127.0.0.1:5001/getRecordDate',{
            },{
                headers:{
                'Content-Type':'application/x-www-form-urlencoded'
                }
            })
            .then(function (response) {
                if(response.data.success == 'true'){
                    dateInfos.value = response.data.data;
                    isStartReciteWordPart.value = true;
                }
                // console.log(resSearch);
            })
            .catch(function (error) {
                console.log(error);
            });
            
        }
        else {
            isStartReciteWordPart.value = false;

            // console.log(selectedDays);
            axios.post('http://127.0.0.1:5001/startReciteWordPart',{
                // dates : selectedDays
                dates : JSON.stringify(selectedDays, null, 2),
            },{
                headers:{
                'Content-Type':'application/x-www-form-urlencoded'
                }
            })
            .then(function (response) {
                if(response.data.success == 'true'){
                    isStartReciteWord.value = true;
                    isSelectExamNew.value = false;
                    console.log(response.data.data)
                    wordList.value = response.data.wordList;
                    numReciteWord.value = response.data.wordCount;
                    examTableName.value = response.data.examTableName;
                    examId.value = response.data.examId;
                }
                // console.log(resSearch);
            })
            .catch(function (error) {
                console.log(error);
            });
        }
    }
 

    

    function getReciteWordExamHis(){
        resetAllState();
        isSelectExamNew.value = false;
        axios.post('http://127.0.0.1:5001/getReciteWordExamHis',{
        },{
            headers:{
               'Content-Type':'application/x-www-form-urlencoded'
            }
        })
        .then(function (response) {
            if(response.data.success == 'true'){
                isSelectExamHis.value = true;
                examTime.value = response.data.examTimestamps;
            }
            
        })
        .catch(function (error) {
            console.log(error);
        });
    }

    function continueReciteWord(){
        axios.post('http://127.0.0.1:5001/continueReciteWord',{
            examTimeStamp : selectExamTime.value
        },{
            headers:{
               'Content-Type':'application/x-www-form-urlencoded'
            }
        })
        .then(function (response) {
            
            if(response.data.success == 'true'){
                isStartReciteWord.value = true;
                isSelectExamHis.value = false;
                console.log(response.data)
                numReciteWord.value = response.data.totalNum[0];
                currentReciteWord.value = response.data.completeWordNum[0];
                wordList.value = response.data.incompleteWordList;
                let wrongWordList = response.data.wrongWordList;
                for (let index = 0; index < wrongWordList.length; index++) {
                    wrongAnswerRecord.value.push(wrongWordList[index][0] + ":" + wrongWordList[index][1])
                }
                examTableName.value = response.data.examTableName;
                examId.value = response.data.examId[0];
            }
            
        })
        .catch(function (error) {
            console.log(error);
        });
    }

    function judgeAnswer(){
        if(myAnswer.value == wordList.value[currentReciteWord.value][0]){
            isRightAnswer.value = true;
            nextQuestion()
        }else{
            isRightAnswer.value = false;
        }
    }

    function updateExamState(){
        axios.post('http://127.0.0.1:5001/updateExamState',{
            examId : examId.value
        },{
            headers:{
               'Content-Type':'application/x-www-form-urlencoded'
            }
        })
        .catch(function (error) {
            console.log(error);
        });
    }

    function updateReciteWordState(){
        console.log(examTableName.value,wordList.value[currentReciteWord.value][2],isRightAnswer.value)
        axios.post('http://127.0.0.1:5001/updateReciteWordState',{
            examTableName :examTableName.value,
            wordId : wordList.value[currentReciteWord.value][2],
            isRightAnswer :isRightAnswer.value
        },{
            headers:{
               'Content-Type':'application/x-www-form-urlencoded'
            }
        })
        .catch(function (error) {
            console.log(error);
        });

    }

    function nextQuestion(){
        if(isRightAnswer.value == false){
            wrongAnswerRecord.value.push(wordList.value[currentReciteWord.value][0] + ":" + wordList.value[currentReciteWord.value][1])
        }

        updateReciteWordState();
        
        isRightAnswer.value = false;
        myAnswer.value = "";
        if((currentReciteWord.value + 1) == numReciteWord.value){
            updateExamState()
            alert("测试结束");
        }else{
            currentReciteWord.value ++;
        }
    }

    function convertTimstampToDate(timestamp){
        // console.log(timestamp)
        const date = new Date(timestamp * 1000);
        // console.log(date)
        return new Intl.DateTimeFormat('zh-CN', {  
        year: 'numeric',  
        month: '2-digit',  
        day: '2-digit', 
        hour: '2-digit',
        minute:'2-digit',
        second:'2-digit',
      }).format(date);

    }
</script>

<template>
    <div class="main-recite neon-text">
        <button class="recite-button neon-btn" @click="startReciteWord">
            <font-awesome-icon icon="fa-solid fa-play" class="text-sm" />
            <span>开始背诵单词</span>
        </button>
        <button class="recite-button neon-btn" @click="getReciteWordExamHis">
            <font-awesome-icon icon="fa-solid fa-redo" class="text-sm" />
            <span>继续背诵单词</span>
        </button>
        <div class="answer-area-wrapper" v-if="isStartReciteWord === true">
            <div class="answer-area">
                <div class="subject-area">{{ wordList[currentReciteWord][1] }}</div>
                <div class="input-area">
                    <div class="sub-input-area">
                        <input class="sub-input-text neon-input" type="text" @keyup="judgeAnswer" v-model="myAnswer">
                    </div>
                    <div>
                        <button class="neon-btn" @click="nextQuestion">
                            <font-awesome-icon icon="fa-solid fa-arrow-right" class="text-sm" />
                            <span>下一题(放弃本题)</span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="state-area">
                <!-- <span>{{ currentReciteWord + 1}} / {{ numReciteWord }}</span> -->
                 <ProcessBar :current="currentReciteWord + 1" :total="numReciteWord"></ProcessBar>
            </div>
        </div>
        <div  class="exam-new-wrapper" v-if="isSelectExamNew === true">
            <div class="exam-new-all">
                <button class="recite-button-new neon-btn" @click="startReciteWordAll">
                    <font-awesome-icon icon="fa-solid fa-list" class="text-sm" />
                    <span>背诵全部单词</span>
                </button>
            </div>
            <div class="exam-new-part">
                <button class="recite-button-new neon-btn" @click="startReciteWordPart">
                    <font-awesome-icon icon="fa-solid fa-tasks" class="text-sm" />
                    <span>背诵部分单词</span>
                </button>
                <DatePickerTreeSelector class="DatePickerTreeSelector" v-if="isStartReciteWordPart === true" :date-infos="dateInfos" @selected-days="startReciteWordPart"></DatePickerTreeSelector>
            </div>
        </div>
        <div  class="exam-history-wrapper" v-if="isSelectExamHis === true">
            <select class="neon-select" v-model="selectExamTime" @change="continueReciteWord">
                <option disabled value="">请选择要继续的日期和时间</option>
                <option v-for="(timestamp,index) in examTime" :key="index" :value="timestamp[0]">{{ convertTimstampToDate(timestamp[0]) }}</option>
            </select>
        </div>
        <div class="record-area">
            <ul>
                <li v-for="(wrongAnswer,index) in wrongAnswerRecord" :key="index">{{ wrongAnswer }}</li>
            </ul>
        </div>
    </div>
</template>

<style scoped>

    .main-recite {
        text-align: center;

        
    }

    .recite-button {
        width: 30%;
        margin-bottom: 1%;
        margin-left: 1%;
        margin-right: 1%;
    }

    .answer-area-wrapper {
        display: flex;
        height: 50%;
    }

    .answer-area {
        flex: 0 0 70%;
        text-align: left;
        /* height: 350px; */
        height: 21.875rem;
        border: solid;
        
    }

    .state-area {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        border: solid;
        min-width: 18.75rem;
        width: 100%;
    }
    .state-area span {
        display: inline-block;
        text-align: center;
    }

    .subject-area {
        display: inline-block;
        text-align: left;
        height: 70.5%;
        padding: 0.5%;
        /* color:  hsla(160, 100%, 37%, 1); */
    }
    
    .input-area {
        text-align: center;
        height: 25%;
    }

    .sub-input-area {
        display: flex;
        height: 50%;
        align-items: center;
        padding-left: 1%;
        padding-right: 1%;
        padding-bottom: 2%;
    }

    .sub-input-area input {
        height: 80%;
        width: 100%;
    }

    .my-awesome-icon-check {
        font-size: 30px;
        color: hsla(160, 100%, 37%, 1);
        width: 10%;
    }

    .my-awesome-icon-close {
        font-size: 30px;
        color: rgb(189, 0, 0);
        width: 10%;
    }

    .input-area button{
        width: 50%;
    }

    .record-area {
        margin-top: 1%;
        text-align: left;
    }

    .record-area li {
        list-style: none;
        margin-bottom: 1%;
    }

    

    .exam-new-wrapper {
        display: flex;  
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        /* justify-content: space-evenly; */
        /* align-items: flex-end; 元素顶部对齐  */
        /* align-items: center; */
    }
    
    .exam-new-all,.exam-new-part{
        display: flex;
        flex-direction: column;
        width: 30%;
    }

    .exam-new-all {
        justify-content: flex-end;
        margin-right: 1%;

    }
    .exam-new-part {
        justify-content: flex-start;
        margin-left: 1%;
    }


    .exam-history-wrapper select {
        /* display: flex; */
        width: 30%;
        text-align: center;
    }

</style>